Le Positionnement

Jusqu'ici, nous n'avons pas modifié la position des éléments sur la page : les paragraphes, titres, citations, formulaires... s'affichaient les uns à la suite des autres. C'est ce qu'on appelle le comportement par défaut. Or, si ce comportement par défaut ne nous convient pas, et ce sera presque toujours le cas, il faut modifier la mise en page à l'aide du langage CSS. Grâce aux techniques de positionnement CSS, nous serons en mesure de placer comme bon nous semble les éléments sur la page.

Balises de type bloc et de type en ligne

A peu près toutes les balises XHTML peuvent être classées en deux catégories :

• Les balises de type bloc : Ces balises créent des blocs de texte qui s'affichent les uns en dessous des autres. C'est le cas par exemple des balises <p>,<table>,<form>,<h1>,<h2>...
  
  
• Les balises de type en ligne : Ces balises se trouvent toujours à l'intérieur de balises de type bloc. Comme leur nom l'indique, ces balises se placent au fil du texte, sur la même ligne. Quelques exemples de balises en ligne : <em>,<strong>,<a>,<q>...

Comportement des balises de type bloc

Testons le comportement de quelques balises de type bloc :

Exemple

L'exemple illustre bien le comportement des balises de type bloc, celles ci se plaçant les unes en-dessous des autres.

On peut ajouter une bordure en CSS pour bien voir leurs dimensions :

Exemple

L'exemple nous montre que toutes ces balises de type bloc prennent toute la largeur de la fenêtre. C'est le cas des paragraphes bien sûr, mais aussi le cas du titre. Bien que celui ci se compose que de quelques mots, il prend quand même toute la largeur. C'est une propriété des balises de type bloc : à moins qu'on leur ordonne le contraire, tout bloc s'étire sur toute la largeur disponible.

Comportement des balises de type en ligne

Reprenons le code XHTML précédent et ajoutons lui quelques balises en ligne comme <strong> et <a> :

Pour bien repérer ces balises en ligne et les différencier des balises de type bloc, appliquons leur une bordure rouge en pointillés :

Exemple

Ici, c'est radicalement différent. Les balises en ligne ne créent pas de retour à la ligne : elles se placent au fil du texte.

Ce comportement (les blocs créent des retours à la ligne, les éléments en ligne suivent le fil du texte...) est le comportement par défaut. On l'appelle le comportement dans le flux : le navigateur place tout seul les éléments sur la page.

Remarque : Les balises de type bloc peuvent contenir d'autres balises de type bloc (à l'éxception de la balise de type paragraphe <p> qui ne peut pas contenir de blocs). Elles peuvent par ailleurs contenir des balises de type en ligne.
En revanche, les balises en ligne ne peuvent contenir que d'autres balises en ligne. il est donc impossible de placer un bloc à l'intérieur d'un élément en ligne.

Autre remarque : Transformer un bloc en élément en ligne (et reciproquement).
Le CSS permet un contrôle étonnant sur la façon dont la page s'affichera. Pour preuve, la propriété display permet de transformer une balise de type bloc en une balise de type en ligne et inversement. Il suffit d'utiliser une de ces valeurs :

• block: transforme un élément en un élément bloc;
• inline : transforme un élément en un élément en ligne.

Si on veut que nos titres <h1> soient considérés comme des balises en ligne et qu'ils ne créent pas de retour à la ligne, il nous suffira d'écrire :

Exemple

Cette propriété est toutefois assez délicate à manipuler. On ne l'utilise que dans des cas très précis. Par exemple, il est relativement courant de transformer les liens d'une menu (<a>) en balises de type bloc pour pouvoir leur donner à chacun des dimensions précises. En effet, on ne peut pas modifier la taille d'un élément en ligne, comme nous le verrons plus loin.
En outre la troisième valeur possible pour display est none. Elle signifie que l'élément ne doit pas être affiché à l'écran.

Les balises génériques <div> et <span>

Toutes les balises que nous avons rencontrées jusqu'à maintenant ont un sens précis. Ainsi <p> sert à délimiter des paragraphes, <strong> identifie les termes importants, etc.

Mais que signifie alors <div> et <span> ? Rien du tout, et c'est pour cela qu'on les apelle balises génériques : elles n'ont aucun sens. Elle ne signifie rien pour le navigateur. On les a crée parce que parfois aucune autre balise ne convient. On a par exemple besoin d'une balise pour englober le corps et ses paragraphes, le menu et ses liens, etc. C'est généralement lors de l'étape de la création du design du site qu'on utilise ces balises génériques.

On en a crée deux pour disposer d'une balise générique de chaque type :

• <div> est de type bloc;
• <span> est de type en ligne.

En outre, grâce à la balise <div> l'on pourra placer comme bon nous semble les éléments sur la page.

Taille et marges des éléments

Que la balise soit de type bloc ou en ligne, l'élément ainsi crée a des dimensions et des marges qu'on peut modifier. Nous avons vu par exemple que les blocs prenaient tout l'espace disponible en largeur. Nous allons découvrir comment modifier cela.

Le principe des boîtes

En XHTML, chaque élément que ce soit un en ligne ou un bloc, est considéré comme une boîte. Chaque boîte possède :

• Un contenu (le texte d'un paragraphe par exemple);
• Une marge interne, appelée padding;
• Une marge externe, appelée margin;
• Une bordure, appelée border.

Voici un exemple :

Les paragraphes de texte possèdent une bordure ainsi que des marges internes et externes :

• La marge interne représente l'espace entre le texte et la bordure qui l'entoure.
• La marge externe représente l'espace entre deux éléments (ici, c'est l'espace entre les deux paragraphes).

C'est aussi simple que cela ! Chaque élément a des marges, et on va pouvoir les modifier à souhait grâce au CSS.

Modifier les dimensions d'un bloc

Avant toute chose, il est nécessaire de savoir qu'on ne peut modifier que la taille des éléments de type bloc. Cela nous permettra par exemple de limiter la largeur du corps de la page, afin qu'il n'occupe que 50% de l'espace. La taille des éléments de type en ligne quant à elle est calculée par le navigateur; on ne peut donc pas y toucher.

Pour modifier la largeur et la hauteur d'un bloc, on utilise les deux propriétés respectives :

• width: détermine la largeur.
• height: détermine la hauteur.

Pour la valeur, l'on peut utiliser les unités que l'on a déjà vues auparavant: les pixels (px), les pourcentages (%), les em...etc.

Testons la propiété width sur le code XHTML précédent, et profitons en pour préciser dans le code CSS que les paragraphes ne doivent pas prendre toute la largeur de la page :

Exemple

On voit sur l'exemple que les paragraphes ne prennent maintenant plus que 50% de largeur ! Cela nous laisse la place pour, par exemple placer un menu à droite.

Modifier les marges des éléments

Cette fois, nous allons voir comment cela fonctionne sur les éléments de type bloc et de type en ligne (contrairement à la largeur de la hauteur qui ne peuvent être spécifiées que sur des blocs).

Les marges (internes et externes) peuvent être modifiées grâce à des propriétés CSS !

• padding : détermine la marge interne.
• margin : détermine la marge externe.

Toujours sur le même code XHTML, en plus de modifier la largeur des paragraphes, nous spécifions une marge interne et une marge externe :

Exemple

Cette fois, nos paragraphes ont une marge interne de 20 pixels et une marge externe de 50 pixels. Ainsi la marge interne correspond à la marge entre le texte et la bordure. Cela augmente ici la lisibilité du texte des paragraphes qui n'est plus collée aux bordures. De son côté la marge externe signifie qu'il ne peut rien y avoir autour du paragraphe dans un espace de 50 pixels.

Centrer un bloc

Pour centrer un bloc il faut respecter deux étapes :

1. Lui donner une largeur avec la propriété width.
2. Lui appliquer des marges externes gauche et droite automatiques en ajoutant les propriétés margin-left: auto; et margin-right: auto;.

Reprenons l'exemple précédent et centrons nos blocs de paragraphe

Exemple

Grâce à ce code, les blocs de paragraphe sont centrés sur la page.

Quatre types de positionnement

En jouant sur les marges externes, nous venons de réussir à déplacer des blocs. Nous commençons à contrôler un peu mieux la façon dont ils s'affichent, mais allons plus loin. Nous allons découvrir comment disposer les éléments sur la page grâce aux quatres techniques de positionnement suivantes :

• Le positionnement flottant ;
• Le positionnement absolu ;
• Le positionnement fixé ;
• Le positionnement relatif.

Ces quatres types de positionnement fonctionnent aussi bien sur des éléments de type bloc que sur les éléments en ligne.

Le positionnement flottant

Ce type de positionnement que nous offre le langage CSS est très pratique. En effet, il permet de faire en sorte qu'un élément flotte et que le texte l'entoure.
Pour faire flotter un élément, on utilise la propriété CSS float. Elle peut prendre 3 valeurs différentes :

• left : flottement à gauche ;
• right : flottement à droite ;
• none : pas de flottement (par défaut) ;

Voici le code XHTML que nous allons utiliser. Il s'agit d'un paragraphe comprenant une image des têtes à claques . On veut que cette image flotte pour que le texte du paragraphe l'habille :

Notez que l'on a crée une classe sur cette image pour pouvoir agir directement sur elle dans le code CSS.

Appliquons maintenant la propriété CSS float sur la classe avatar :

Exemple

Voila à quoi ressemble une image flottante. On peut rapeller au passage que la marge par défaut d'un élément en ligne comme <img /> est nulle (0px), ce qui explique pourquoi celui ci est collé au texte.

Remarque : Il est possible d'arreter un flottant, c'est la propriété clear. Elle peut prendre les valeurs left, right, both et none.

Si l'on applique clear à un élément celui-ci ne se placera plus à gauche ou à droite de l'élément flottant mais en dessous. Cela permet d'éliminer l'effet de flottement. Un clear:left; stoppera un flottement à gauche, right; un flottement à gauche et both stoppera n'importe quel flottement, qu'il soit gauche ou droite. Enfin none ne fait rien.

Le positionnement absolu

Les trois types de positionnement qu'il nous reste à voir se ressemble un peu en apparence mais ils ne servent pas à faire les mêmes choses.

Le positionnement absolu permet de placer un élément ou l'on veut sur la page, au pixel près. On dit qu'on fait sortir l'élément du flux C'est un type de positionnement puissant.

Pour positionner un élément en absolu, il faut lui appliquer la propriété position et lui donner la valeur absolute. Nous allons réutiliser le code XHTML précédent et modifier uniquement le code CSS :

De cette manière l'image des têtes à claques sera cette fois positionné en absolu. C'est bien mais il manque encore quelques petits réglages. Il faut dire en effet dire à quel endroit on veut placer l'élément sur la page, grâce aux propriété CSS suivantes :

• top: indique la distance par rapport au haut de la page ;
• bottom: indique la distance par rapport au bas de la page ;
• left: indique la distance par rapport au bord gauche de la page ;
• right: indique la distance par rapport au bord droit de la page.

Bien sur l'on n'est pas obligé d'utiliser toutes les propriétés pour placer nos éléments. Deux propriétés suffisent en théorie.

Nous décidons de positionner les têtes à claques 75 pixels vers le bas et 250 pixels vers la droite :

Exemple

L'image s'est positionné à l'endroit précis que nous avons demandé sur la page. Il s'est placé au-dessus des autres éléments.

Ainsi le point de coordonnées (0,0) se trouve en haut à gauche de la page. Si l'on veut positionner l'élément par rapport au bas ou au bord droit de la page, il faut penser aux propriétés right et bottom. Par exemple si l'on veut positionner l'image tout en bas à droite de la page il faut écrire :

Exemple

Remarque : Superposition de bloc avec z-index

On a pu constater que sur le dernier exemple un élément positionné en absolu était placé par dessus les autres éléments qui étaient restés dans le flux : l'image était venu se placer par dessus le paragraphe. Un problème se pose toutefois si l'on a plusieurs éléments positionnés en absolu qui se chevauchent: Comment définir l'ordre dans lequel ils doivent se superposer?
Il y a une propriété CSS qui permet de faire cela z-index. L'élément ayant le z-index le plus élevé sera affiché par dessus les autres.

Prenons un exemple avec deux images qui se chevauchent :

Exemple

Ici, c'est l'image du pingouin (autre_avatar) qui sera positionnée par dessus l'avatar des têtes à claques car son z-index est plus élevé.

Le postionnement fixe

Le positionnement fixe est très proche du positionnement absolu. La différence réside dans le fait que l'élément reste à sa position même si on descend plus bas dans la page. C'est un peu le même principe que la propriété background-attachment: fixed; que nous avons vu précédemment.

Pour placer un élément en position fixe, il suffit d'utiliser la valeur fixed et de se servir là encore des propriétés de positionnement top, bottom, left et right.

Exemple

Le résultat est difficile à montrer en effet, il n'est valable que lorsque l'on manipule l'ascenseur pour descendre plus bas dans la page : l'image reste à sa position.

Le positionnement relatif

Légérement plus complexe, le positionnement relatif permet de placer un élément par rapport à sa position théorique dans le flux. Autrement dit cela permet de le décaler de sa position normale (dans le flux).

On utilise cette fois la valeur relative de l'attribut position. La encore, on doit se servir des propriétés top,bottom,left et right, mais elles ont ici une signification un peu différente. Au lieu de se rapporter aux bords de la page, elles se rapportent à la position normale de l'élément.
Cela signifie que, contrairement à tout à l'heure ou l'origine du repère (le point de coordonnées 0,0) était tout en haut à gauche de la page, cette fois il se trouve à la position de base de l'élément.

Reprenons le code XHTML d'un précédent exemple :

Imaginons que l'on veuille décaler le lien en bas à droite de sa position initiale. Cela nous donne le code CSS suivant :

Exemple

Nous voyons sur l'exemple que le lien a été placé 50 pixels plus bas et 75 pixels plus à droite. Nous constatons aussi qu'il y a maintenant un blanc dans le paragraphe : en effet, un élément positionné en relatif occcupe toujours de l'espace à sa position initiale.

Passez à la Bibliographie